import React from 'react';
import { Button, Table, Modal, message } from 'antd';
import * as routerActions from 'react-router-redux';
import { connect } from 'react-redux';
import Api from 'Utils/api';
import SigleQuestion from './Component/SingleQuestion';
import MultipleQuestion from './Component/MultipleQuestion';
import AddEditType from './AddEditType';
import { generateUUID } from '../../../../../../utils/index';
import CommonBorder from './../../../../DispatchPage/Components/CommonBorder';
import './index.scss';

const confirm = Modal.confirm;
const PAGE_SIZE = 10;
class QuestionMng extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      id: props.params.id,
      questionType: [],
      currentPage: 1
    };
    this.initData = ::this.initData;
  }
  componentWillMount() {
    this.initData();
  }
  initData() {
    const self = this;
    const api = new Api({
      method: 'GET',
      path: `/subjects/subject_type/${this.state.id}`,
      success: (json) => {
        const res = json[0] ? json[0] : {};
        const newquestionType = [];
        if (res.question_type && res.question_type.length > 0) {
          for (let i = 0, len = res.question_type.length; i < len; i++) {
            const item = {
              id: i,
              question_type: res.question_type[i],
              amount: res.amounts[i],
              score: res.scores[i]
            };
            newquestionType.push(item);
          }
        }
        self.setState({
          questionType: newquestionType,
          id: this.props.params.id,
        });
      },
      error: (msg) => {
        message.error(msg, 3);
      },
    });
    api.run();
  }
  generatorColumns() {
    return [
      {
        title: '序号',
        dataIndex: 'id',
        render: (text, record, index) => (
          <span >{((this.state.currentPage - 1) * PAGE_SIZE) + (index + 1)}</span >
        )
      },
      {
        title: '题型',
        dataIndex: 'question_type',
        render: text => (
          <span>{text}</span>
        )
      },
      {
        title: '题数',
        dataIndex: 'amount',
        render: text => (
          <span>{text}</span>
        )
      },
      {
        title: '分值',
        dataIndex: 'score',
        render: text => (
          <span>{text}</span>
        )
      },
      {
        title: '操作',
        dataIndex: 'operate',
        render: (text, record) => (
          <span className="operate">
            <span className="edit" onClick={this.handleEdit.bind(this, record)}>修改</span>
            <span className="delete" onClick={this.handleDelete.bind(this, record.id)}>删除</span>
          </span>
        )
      }
    ];
  }
  handleEdit(record) {
    this.addEditModal.showModal(record);
  }
  handleDelete(id) {
    const self = this;
    confirm({
      title: '删除',
      content: '确定删除该题型吗？',
      onOk() {
        const api = new Api({
          method: 'PATCH',
          path: `/subjects/delete_subject/${self.state.id}`,
          query: {
            index: id
          },
          success: () => {
           // location.reload();
            self.initData();
            self.setState({
              random: generateUUID()
            });
          },
          error: (msg) => {
            message.error(msg, 3);
          },
        });
        api.run();
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }
  handleSee() {
    this.props.dispatch(routerActions.push(`/system/corule/interactive/knowledge/question_detail/${this.state.id}`));
  }
  handleAdd() {
    this.addEditModal.showModal();
  }
  handleAddQuestion() {
    this.props.dispatch(routerActions.push(`/system/corule/interactive/knowledge/add_new_question/${this.state.id}`));
  }
  render() {
    const columns = this.generatorColumns();
    const { id, random } = this.state;
    return (
      <CommonBorder
        content={
          <div className="question-mng-page">
            <div className="btn-wrap">
              <Button className="search-btn" onClick={this.handleSee.bind(this)}>
                <img src="images/knowledge/icon_see.png" alt="查看问卷" className="img" />
                查看问卷
              </Button>
              <Button className="search-btn" onClick={this.handleAdd.bind(this)}>
                <img src="images/page/icon_add.png" alt="" />
                新增题型
              </Button>
              <Button className="search-btn" onClick={this.handleAddQuestion.bind(this)}>
                <img src="images/page/icon_add.png" alt="" />
                新增问题
              </Button>
            </div>
            <div className="table-wrap">
              <Table
                rowKey={record => record.id}
                columns={columns}
                bordered
                dataSource={this.state.questionType}
                pagination={false}
              />
            </div>
            <div className="component-wrap">
              <SigleQuestion
                subjectId={id}
                random={random}
              />
            </div>
            <MultipleQuestion
              subjectId={id}
              random={random}
            />
            <AddEditType
              ref={(ref) => { this.addEditModal = ref; }}
              subjectId={this.state.id}
              onOk={this.initData}
            />
          </div>
        }
      />
    );
  }
}
function mapStateToProps(state) {
  return {
    ...state.routing
  };
}

export default connect(mapStateToProps)(QuestionMng);
